<template>
    <div class="buy-page" v-if="cinemaList">
        <div class="header">
            <img src="@/assets/goBack.png" alt="" class="goBack" @click="Back">
            <span class="title">{{ title }}</span>
            <li class="iconfont icon-sousuo" @click="search"></li>
        </div>
        <div class="tabs-bar-wrapper">
            <ul>
                <li v-for="item in getData" @click="handerClick(item.cinemaIds)">{{ item.day }}</li>
            </ul>
        </div>
    </div>

    <!-- 影院列表组件 -->
    <cinlist :tCinema="tCinema">
    </cinlist>
</template>

<style scoped>
/* .buy-page {
    position: fixed;
    width: 100%;
} */

span {
    font-size: 16px;
}

.header {
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iconfont {
    font-size: 20px;
}

.goBack {
    width: 26px !important;
}

.tabs-bar-wrapper {
    height: 50px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    border-bottom: 1px solid #ededed;
    color: #191a1b;
    padding: 0 20px;
    box-sizing: border-box;
}

ul {
    height: 600px;
}

.tabs-bar-wrapper ul {
    display: flex;
    align-items: center;
    height: 50px;
    overflow: auto;
}

.tabs-bar-wrapper li {
    padding-right: 15px;
    flex-shrink: 0;
    overflow: hidden;
    color: #191a1b;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}
</style>

<script setup>
import { batchCinema, getDetail, getCinemaDate, parseTimestamp } from "@/api/mm.js"
import cinlist from "@/component/cinlist.vue"
import { onMounted, computed, ref } from "vue"
import { useRouter, useRoute } from "vue-router"
import { userStore } from '@/stores/user'

const title = ref(null);
const cinemaList = ref(null);
const nowCinemaIds = ref(null);
const tCinema = ref(null);
const store = userStore()
const cityId = store.cityId

const router = useRouter();
const route = useRoute()

const search = () => {
    router.push("/cinemas/search")
}

const Back = () => {
    history.back()
}

const handerClick = async (item) => {
    tCinema.value = (await batchCinema({
        cityId: cityId,
        cinemaIds: item
    })).data.cinemas
}

const fetchdata = async () => {
    title.value = (await getDetail({ filmId: route.params.id })).data.film.name

    cinemaList.value = (await getCinemaDate({
        filmId: route.params.id,
        cityId: cityId
    })).data.showCinemas

    nowCinemaIds.value = (cinemaList.value[0].cinemaList).join(",")
    handerClick(nowCinemaIds.value)
}

const getData = computed(() => {
    return cinemaList.value.map((item, index) => {
        return {
            "timestamp": item.showDate,
            "day": parseTimestamp(item.showDate, "M月D日"),
            "cinemaIds": (cinemaList.value[index].cinemaList).join(",")
        }
    })
})

onMounted(() => {
    fetchdata()
})

</script>
